<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>用户登录</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<script src="/js/font_595888_1jlcfz62jg8vkj4i.js"></script>
		<style>
		/* 	input,.btn{margin-top: 20px;} */
			.code{width: 110px;height: 38px;border: 0px solid black;position:absolute;right:0;  margin-top: -42px;margin-right: 3px;}
			a{color: black;}
			.content-middle-body > input, .content-middle-body > button, .content-middle-body > a {
				margin-top:12px;
				margin-bottom: 12px;
			}
			  .icon {
			     width: 1em; height: 1em;
			     vertical-align: -0.15em;
			     fill: currentColor;
			     overflow: hidden;
			  }					
			.col-sm-4, .col-xs-12 {
				padding-left:0;
				padding-right:0;
			}
			.div-c-chooseChatWrapper, .div-c-chooseChatWrapper > div {
				display:flex;
				align-items:center;
			}
			.div-c-chooseChatWrapper > div > span {
				margin-left:16px;
			}
			.modal-body .div-c-chooseChatWrapper + .div-c-chooseChatWrapper {
				border-top:1px solid #cecece;
			}
			.div-c-chooseChatWrapper {
				justify-content:space-between;
				padding:2vh;
			}
			.div-c-chooseChatWrapper svg {
				width:6vh;
				height:6vh;
				max-width:40px;
				max-height:40px;
			}			
		</style>
	</head>
	<body style="">
		<div class="bg-theme text-center top clearfix col-xs-12 col-sm-4 col-sm-offset-4">
			<!-- <a onclick="back()" class="glyphicon glyphicon-chevron-left" style="color: white;top: 50%;transform:translateY(-50%);left:10px;position: absolute;cursor: pointer;"></a> -->
			<span>用户登录</span>
		</div>
		<div class="text-center clearfix content-middle-body scroll col-xs-12 col-sm-4 col-sm-offset-4" style="padding-left:10px;padding-right:10px;margin-top:40px;">
			<!-- 正文开始 -->
			<input id="name" type="text" placeholder="用户名" class="form-control input-lg" maxlength='15' style="margin-top:20px;" ></input>
			<input id="pass" type="password" placeholder="密码" maxlength='16' class="form-control input-lg"></input>
			<div style="position: relative;">
			<input id="code" type="text" placeholder="验证码(只能输入数字哦)" maxlength='4'  oninput="value=value.replace(/[^\d]/g,'')" class="form-control input-lg"" ></input>
			<img src="u/code.do" class="code" alt="点击刷新" title="点击刷新" />
			</div>
			<span id="notice" style="width:100%;color: red;border: 0;display: block;font-size: 16px;text-align: left;"></span>
<!-- 			<a href="" class="fl btn">在线客服></a> -->
			<a href="" class="fr btn" id="a-i-forgetPassWord">忘记密码?</a>
			<button onclick="login()" id="login" class="btn btn-lg disabled pm bg-theme">立即登陆</button>
			<a href="register.jsp" class="btn btn-lg pm bg-theme">立即注册</a>
			<button id="tryplay" class="btn btn-lg pm bg-theme">免费试玩</button>
			<!-- 正文结束 -->
		</div>
		
		
	 	<div class="foot col-xs-12 col-sm-4 col-sm-offset-4" style="border-top:none;">
			<iframe src="f.jsp"></iframe>
		</div>
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>			
<div class="modal fade" id="kefuModal" role="dialog" aria-labelledby="kefuModal" aria-hidden="true">
    <div class="modal-dialog" style="max-width:400px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="text-align: center;" id="myModalLabel">选择客服类型</h4>
            </div>
            <div class="modal-body" style="padding-bottom:0;">
            	
            </div>
            <div class="modal-footer" style="text-align: center;border-top:none;">
                <button type="button" class="btn btn-default" style="width:70%;" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>			
	</body>
	<script>
	fixHeadAndFoot()
	 setContentBodyHeight()
	 
		/*  function browserRedirect() {
	         var sUserAgent = navigator.userAgent.toLowerCase();
	         var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
	         var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
	         var bIsMidp = sUserAgent.match(/midp/i) == "midp";
	         var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
	         var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
	         var bIsAndroid = sUserAgent.match(/android/i) == "android";
	         var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
	         var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
	         if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
	             $("")
	         } else {
	        	 $("body div").css("display","none")
	             alertme("请使用手机访问")
	         }
	     }
	
	     browserRedirect(); */
	     
		$("#kefuModal").on(getEndClickEvent(), ".div-c-chooseChatWrapper", function(event) {
			var self = event.currentTarget
			var qqNum = self.dataset.qqnum
			if (self.dataset.type == "qq") {
				location.href = "http://wpa.qq.com/msgrd?v=3&uin=" + qqNum + "&site=qq&menu=yes"
			} else {
				location.href = "chat/kefu.do"
			}
		})	     
		
	     $("#a-i-forgetPassWord").on(getEndClickEvent(), function(e) {
	    	 e.preventDefault()
	    	 $("#kefuModal").modal("show")
	     })
	     var overscroll = function(el) {
    	  el.addEventListener('touchstart', function() {
    	    var top = el.scrollTop
    	      , totalScroll = el.scrollHeight
    	      , currentScroll = top + el.offsetHeight;
    	    //If we're at the top or the bottom of the containers
    	    //scroll, push up or down one pixel.
    	    //
    	    //this prevents the scroll from "passing through" to
    	    //the body.
    	    if(top === 0) {
    	      el.scrollTop = 1;
    	    } else if(currentScroll === totalScroll) {
    	      el.scrollTop = top - 1;
    	    }
    	  });
    	  el.addEventListener('touchmove', function(evt) {
    	    //if the content is actually scrollable, i.e. the content is long enough
    	    //that scrolling can occur
    	    if(el.offsetHeight < el.scrollHeight)
    	      evt._isScroller = true;
    	  });
    	}
    	overscroll(document.querySelector('.scroll'));
    	document.body.addEventListener('touchmove', function(evt) {
    	  //In this case, the default behavior is scrolling the body, which
    	  //would result in an overflow.  Since we don't want that, we preventDefault.
    	  if(!evt._isScroller) {
    	    evt.preventDefault();
    	  }
    	});	 
    	
    	function createQQChatItem(item, index) {
    		var html =
    			"<div class='div-c-chooseChatWrapper' data-qqnum='" + item.number + "' data-type='qq'>"+
    				"<div>"+
    						"<svg class='icon' aria-hidden='true' style='fill:rgb(253,107,84);'>"+
    				  	  "<use xlink:href='#icon-social-qq'></use>"+
    					"</svg>"+           		
    					"<span>客服-" + item.note + "</span>"+
    				"</div>"+
    			     	"<svg class='icon' aria-hidden='true' style='fill:rgb(253,107,84);'>"+
    				  	  "<use xlink:href='#icon-1202youjiantou'></use>"+
    					"</svg>"+    
    			"</div>"		
    		return html
    	}   	
    	
    	ajax({
    		url: "/kfurl.do",
    		type: "post",
    		data: {},
    		success: function(data) {
    			if (data.indexOf("<!DOCTYPE html>") != -1) {
    				return
    			}
    			var newData = JSON.parse(data)
    			var len = newData.data.length > 3 ? 3: newData.data.length
    			for (var i = 0; i < len; i++) {
    				var item = newData.data[i]
    				$("#kefuModal .modal-body").append(createQQChatItem(item, i + 1))
    			}
    		},
    		error: function(status) {
    			showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
    		}
    	})   	
    	
	ajax({
		url: "/cplays.do",
		type: "post",
		data: {},
		success: function(data) {
			var newData = JSON.parse(data)
			if (newData.data == 1) {
				$("#tryplay").addClass("active")
			}
		},
		error: function(status) {
			showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
		}
	}) 	    	
    	
		$(function(){
			$("input").bind('input propertychange', function() {
				if(isNull()=="ok"){
					$("#notice").text("");
					$("#login").removeClass("disabled");
				}else{
					$("#notice").text(isNull());
				}
			});
			$(".code").click(function(){
				$(".code").attr("src","u/code.do?"+Math.random());
			});
			$("#tryplay").click(function(){
				window.location.href="u/swzh.do"
				/* var name=prompt("请输入你要试玩的用户名","请牢记，密码123456");
				if(name=='') showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "用户名不能为空！")
				else if(name==null) ;
				else{
					ajax({
						url:'u/checkUser.do',
						data:{name:name},
						type:'post',
						success:function(data){
							var json=eval('('+data+')');
							if(json.data!=0){
								showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "用户名已经存在！")
							}else{
								ajax({
									url:'u/tryplay.do',
									data:{name:name},
									type:'post',
									success:function(data){
										var json=eval('('+data+')');
										if(json.message==1){
											window.location.href="sy.do";
										}
									}
								});
							}
						}
					});
				} */
			});
		});
		function isNull(){
			if($("#name").val()==""||$("#name").val()==null) return "用户名不能为空";
			else if($("#pass").val()==""||$("#pass").val()==null) return "密码不能为空";
			else if ($("#pass").val().length<6||$("#pass").val().length>16) return "密码不能小于6位或大于16位";
			else if($("#code").val()==""||$("#code").val()==null) return "验证码不能为空";
			else return "ok";
		}
		
		stopUserScaleScreenIOS()
	</script>
</html>
